<!DOCTYPE html>
<html lang="zh-CN">
	<!-- 排行榜主页 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/paihangbangzhuye.js" defer></script>
	<script src="js/ip.js"></script>
    <title>实战课排行榜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: #fff;
        }

        .banner {
			margin-top: 75px;
            background: linear-gradient(135deg, #ff6a00 0%, #ff3c00 100%);
            height: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .banner-title {
            color: white;
            font-size: 36px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .banner-title::before,
        .banner-title::after {
            content: '';
            display: block;
            width: 40px;
            height: 50px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 1L9 9H2L7 14L5 22L12 17L19 22L17 14L22 9H15L12 1Z"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
        }

        .tabs {
            display: flex;
            justify-content: center;
            padding: 0 20px;
            border-bottom: 1px solid #eee;
            background: #fff;
        }

        .tab {
            padding: 15px 30px;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;
        }

        .tab.active {
            color: #ff5722;
            font-weight: bold;
        }

        .tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #ff5722;
        }

        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .rank-content {
            display: none;
        }

        .rank-content.active {
            display: block;
        }

        .course-item {
            background: #f7f7f7;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            text-decoration: none;
            transition: all 0.3s;
        }

        .course-item:hover {
            transform: translateX(5px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .rank-number {
            width: 24px;
            height: 24px;
            background: #ffb74d;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .course-item:nth-child(1) .rank-number {
            background: #ff6b6b;
        }

        .course-item:nth-child(2) .rank-number {
            background: #4ecdc4;
        }

        .course-item:nth-child(3) .rank-number {
            background: #45b7d1;
        }

        .course-image {
            width: 80px;
            height: 80px;
            background: #eee;
            border-radius: 4px;
            overflow: hidden;
        }

        .course-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .course-info {
            flex: 1;
        }

        .course-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
        }

        .course-price {
            color: #ff5722;
            font-size: 16px;
            font-weight: bold;
        }

        .student-count {
            color: #999;
            font-size: 12px;
            margin-top: 4px;
        }

        .tab {
            padding: 10px;
            cursor: pointer;
            color: #666;
        }

        .tab.active {
            color: #ff5722;
            /* 点击后的颜色 */
            font-weight: bold;
            /* 点击后的加粗 */
            border-bottom: 2px solid #ff5722;
            /* 点击后的下边框 */
        }
    </style>
	<link rel="stylesheet" href="css/nav.css" />
	<link rel="stylesheet" href="css/login.css" />
</head>

<body>
	
	<div id="loginPopup" class="popup-overlay">
		<div class="popup-content">
			<div class="container">
				<div class="tit">登录</div>
				<input type="text" id="po" placeholder="账号" />
				<input type="password" id="pw" placeholder="密码">
				<button id="login">登录</button>
				<span class="go-register">没有账号？去注册</span>
				<span class="close-popup" data-dismiss="login">×</span> <!-- 关闭按钮 -->
			</div>
		</div>
	</div>
	<div id="registerPopup" class="popup-overlay">
		<div class="popup-content">
			<div class="container">
				<div class="tit">注册</div>
				<input type="text" placeholder="用户名" id="reg_username" />
				<input type="text" placeholder="手机号" id="reg_phone" />
				<input type="password" placeholder="设置密码" id="reg_password">
				<input type="password" placeholder="确认密码" id="reg_confirm_password">
				<button id="register">注册</button>
				<span class="go-login">已有账号？去登录</span>
				<span class="close-popup" data-dismiss="register">×</span> <!-- 关闭按钮 -->
			</div>
		</div>
	</div>
	
	
	
	
	<nav class="nav">
	
	
	
		<div class="ndiv">
			<ul>
				<a href="index.html" class="logo">
					<img src="img/ZXlogo.png" alt="">
					卓越在线首页
	
				</a>
			</ul>
			<ul>
				<li><a href="FreeClasses.html" class="fcolor">免费课</a></li>
				<li><a href="PracticalClasses.html" class="fcolor">实战课</a></li>
				<li><a href="SystematicCourses.html" class="fcolor">体系课</a></li>
	
				<li class="shangyehezuo">商业合作
					<div class="syhz">
						<p><a href="enterpriseServices.html">企业服务</a></p>
						<p><a href="teacherSettled.html">讲师入住</a></p>
					</div>
				</li>
				<li><a href="teacherlogin.html">教师系统</a></li>
			</ul>
			<ul class="rig">
				<input type="text" placeholder="请输入关键字">
				<button class="search">🔎搜索</button>
				<a href="gouwuche.html">
					<img src="img/购物车.png" alt="" class="gwc">
				</a>
	
				<span>登录</span>&nbsp;<span>注册</span>
				<span class="dlxx">
					<a href="" class="xxtz"><img src="img/XXTZ.png" alt="" /></a>
					<a href="grzy.html" class="grzy">
						<img src="img/SZK.png" alt="" />
					</a>
					<span id="tcdl">退出</span>
				</span>
			</ul>
		</div>
		</div>
	</nav>
    <div class="banner">
        <div class="banner-title">
            实战课 · 排行榜
        </div>
    </div>

    <div class="tabs">
        <div id="changxiao" class="tab" data-tab="sales">畅销榜</div>
        <div id="xuexi" class="tab" data-tab="study">学习榜</div>
    </div>

    <div class="main-container">
        <!-- 畅销榜内容 -->
        <div id="sales" class="course-content">
            <div id="sales-data">
                <div class="course-list"></div>
            </div>
        </div>

        <!-- 学习榜内容 -->
        <div id="study" class="course-content">
            <div id="study-data">
                <div class="course-list"></div>
            </div>
        </div>
    </div>




    <script src="js/paihangbangzhuye.js"></script>


</body>

</html>